import React, { Component } from 'react'
import PropTypes from "prop-types"
// 引入 nanoid 随机生成一个唯一值
import {nanoid} from "nanoid"
import "./index.css"


export default class Header extends Component {
    // 对接受的 props 进行 类型、必要性 的限制
    static propTypes = {
        addTodo: PropTypes.func.isRequired
    }
    // 回车 添加
    handleOnKeyUp = (event) => {
        // 解构赋值 keyCode,target
        const {keyCode,target} = event
        // 判断是否回车
        if(keyCode !== 13) return
        // 不能为空
        if(target.value.trim() === ""){
            alert("输入不能为空")
            return 
        }
        // 准备一个对象
        const newItem = {
            id:nanoid(),
            title:target.value,
            done:false
        }
        this.props.addTodo(newItem)
        target.value = ""
    }
    render() {
        return (
            <div className="todo-header">
                <input onKeyUp={this.handleOnKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认" />
            </div>
        )
    }
}
